<template>
    <div>
    <header>
        <div class="logo">
    <img alt="MyBook logo" class="logo" src="@/assets/logo.svg" />
    <h1>豆包看书</h1>
        </div>
        <div class="top-nav">
        <template v-if="isLogin">
            <span>
                <router-link to="/user">
                    我的
                </router-link>
            </span>
                <span><a href="javascript:void(0);" @click="logout">退出</a></span>
        </template>
            <template v-else>
                <span><router-link to="/login">登录</router-link></span>
                <span>注册</span>
            </template>
        </div>
    </header>
    </div>
</template>

<script>
import { mapWritableState,mapActions } from 'pinia';
import { useUserStore } from '../stores/user';
import UserApi from '../api/user';
export default {
    methods: {
        ...mapActions(useUserStore, ["logoutState"]),
        async logout() {
            const api = new UserApi();
            let res = await api.logout();
            console.log(res);
            if (res.code === 200 && res.data.logoutStatus === "success") {
                // this.isLogin = false;
                this.logoutState();
                this.$router.replace("/login");
            }
        }
    },
    computed: {
        ...mapWritableState(useUserStore, ["isLogin"])
    },

}
</script>

<style scoped>
.logo {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.logo img {
    height: 80px;
    flex: 0 0 80px;
}
 
.logo h1 {
    flex: 1 1 auto;
    margin-left: 16px;
}
.top-nav{
    margin-right: 40px;
}
 
.top-nav > span{
    padding: 16px;
}
</style>